<!DOCTYPE HTML>
<html>
    <head>
        <title>Computer</title>
        <link  type="text/css" rel="stylesheet" href="css.css"/>
        <script src="jquery-1.4.4.min.js"></script>
        <script type="text/javascript">
        var maxTime = 5000;
        var add = 100;
        var standard = 100;
        var now = standard;
        var request = 0;
        var requestRounds = 5;
        var waningTime = 1500;
        
        var boxTop = 160;
        var boxLeft = 20;
        var addPx = 100;
            
        
            $('document').ready(function() {
                polling();
            })
            
            function polling() {                
                $.ajax({
                    url: 'update.php',
                    type: 'GET',            
                    success: updatePoll
                });
            }
            
            function updatePoll(e) {
                var jData = JSON.parse(e);
                
                if(jData.new_data == 1) {
                    if(jData.data.butClickd) {
                        var move = jData.data.butClickd;
                        moveSquare(move);
                    } 
                }
                setTimeout(polling, now);
            }
            
            function moveSquare(move) {
                //1 up, 2 left, 3 down, 4 right
                var boxMove;
                
                if(move == 1) {
                    boxTop = boxTop - addPx;
                    boxMove = boxTop + "px";
                    $('#square').animate({top: boxMove}, "fast");
                } 
                
                if(move == 2) {
                    boxLeft = boxLeft - addPx;
                    boxMove = boxLeft + "px";
                    $('#square').animate({left: boxMove}, "fast");
                } 
                
                if(move == 3) {
                    boxTop = boxTop + addPx;
                    boxMove = boxTop + "px";
                    $('#square').animate({top: boxMove}, "fast");
                } 
                
                if(move == 4) {
                    boxLeft = boxLeft + addPx;
                    boxMove = boxLeft + "px";
                    $('#square').animate({left: boxMove}, "fast");
                }
            }
        </script>
    </head>
    <body>
        <div id="top">
            <span>:::::The box game v0.2:::</span>
        </div>
        <div id="slowCon">WARNING!!!<br />Connection is slow!</div>
        <div id="square" class="square"><br/>The moving box</div>
        <div id="lastCommands"></div>
    </body>
</html>